<template>
    <div id="map">
    </div>
</template>

<script>
  import 'ol/ol.css';
  import {Map, View} from 'ol';
  import TileLayer from 'ol/layer/Tile';
  import OSM from 'ol/source/OSM';
  import  {transform }from 'ol/proj'
  import  Tile from 'ol/layer/Tile'
  import  XYZ from 'ol/source/XYZ'

  export default {
    data() {
      return {
        activeIndex: '1',
      };
    },
    created () {
      console.log('home实例')
    },
    mounted:function(){
      //view
      var view=new View({
        // 设置成都为地图中心
        center: transform([110,39],"EPSG:4326","EPSG:3857"),
        zoom: 4
      });
      //var osm=new ol.layer.Tile({source: new ol.source.OSM()});
      // map
      const map = new Map({
        layers: [
          this.getTdtLayer("vec_w"),
          this.getTdtLayer("cva_w"),

        ],
        view:view,
        target: 'map'
      });
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      getTdtLayer(lyr) {
        let urls=[];
        for(let i=0;i<8;i++)
        {
          urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}")
        }
        let layer = new Tile({
          source: new XYZ({
            urls:urls
          })
        });
        return layer;
      }
    }
  }
</script>

<style scoped>
  #map {
    width: 100%;
    height: 100%;
  }
</style>
